<template>
  <div class="content">
    <!-- <div id="container" :data="data"> -->
      <div class="rank-content">
      <div :id="id" :data="data" v-if="show"></div>
      </div>
    <!-- </div> -->
  </div>
</template>

<script>
// import * as echarts from 'echarts'
// import autoSize from '../../uitils/auto-font-size.js'
export default {
  components: {},
  name: 'chart-ybar',
  props: {
    title: String,
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    horizontal: {
      type: Boolean,
      default: false
    },
    barWidth: {
      type: [Number, String],
      default: 8
    }
  },
  data() {
    return {
      id: '',
      btnActived: 1,
      show: true,
    }
  },
  created() {
    this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  updated() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  methods: {
    fontSize(val, initWidth = 1920) {
      let nowClientWidth = document.documentElement.clientWidth
      return val * (nowClientWidth / initWidth)
    },
    _initBar() {
      let option = {
        // title: this.chartTitle,
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const { product, count } = params[0].data
            // const icon = `<span style="display: inline-block;width:10px;height: 10px;background-color: ${color};border-radius: 50%;margin-right: 5px"></span>`
            const product1 = `<p style="margin-bottom:0;">${product}</p>`
            const count1 = `<p>${'数量：' + count}</p>`
            return product1 + count1
          }
        },
        grid: {
          left: '20%',
          right: '10%',
          bottom: '15%',
          top: '2%',
          containLabel: false
        },
        yAxis: {
          type: 'category',
          inverse: true,
          show: true
        },
        xAxis: [
          {
            show: true,
            axisLabel: {
              formatter: value => {
                return value
              },
              color: '#000',
              fontSize: 12
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#ccc',
                type: 'dashed'
              }
            }
          },
          {
            show: false
          }
        ],

        series: [
          //x轴
          {
            show: false,
            type: 'bar',
            barGap: '-100%',
            barWidth: this.barWidth,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#000',
                  fontSize: 12
                },
                position: 'right'
              }
            }
            // encode: {
            //   x: 'nums',
            // },
          },
          //y轴
          {
            show: false,
            type: 'bar',
            xAxisIndex: 1, //代表使用第二个X轴刻度
            barGap: '-100%',
            barWidth: this.barWidth,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: '#000'
                  }
                },
                color: '#00ADFD',
              }
            },
            label: {
              normal: {
                show: false,
                // position: 'insideRight',
                // position: [0, '-17'],
                formatter: '{b}',
                textStyle: {
                  fontSize: 12,
                  color: '#000'
                }
              }
            }
            // encode: {
            //   y: 'product',
            // },
          }
        ],
        dataset: {
          source: this.data
        }
      }
      let documentChart = document.getElementById(this.id)
      if (documentChart) {
        this.chart = this.$echarts.init(documentChart)
        this.chart.setOption(option)
      }
      window.addEventListener('resize', () => {
        this.chart.resize()
        this.show = false
        setTimeout(() => {
          this.show = true
        }, 300)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;
  .rank-content {
    flex: 1;
    position: relative;
    margin-top: 0.926vh;

    > div {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
